<!--
 * @Date: 2022-11-21 15:10:27
 * @LastEditTime: 2023-02-09 15:37:39
 * @Description: content
-->
<template>
	<view class="page-wrap common_bg" :style="{
      backgroundImage: `url(${imgBaseUrl}${'/static/img/box_top_bg.png'})`
    }">


		<view class="page-wrap-hd">


			<view @click="$common.to({ url: '/package/mine/bag' })" class="bag-btn">
				<view class="icon">
					<cimage src="/static/icon/bag.png" mode="scaleToFill" />
				</view>

				盒柜
			</view>

			<view @click="$common.toRule(2)" class="rule-btn">活动规则</view>
			<view class="fhsm" v-if="ggao[0]">

				<u-notice-bar mode="horizontal" type="none" :list="ggao"></u-notice-bar>
			</view>
			<lff-barrage :style="{
				    width: '100%',
					top:'360rpx'
		
				  }" background="linear-gradient(to right,rgba(000,83,109, 0.9),rgba(230,83,109, 0.1))" type="rightToLeft"
				ref="detailBarrage" height="120" :maxTop="0"></lff-barrage>
		</view>
		<!-- 弹窗 -->
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog :type="msgType" cancelText="关闭" confirmText="去绑定" title="公告" :content="popContent"
				@confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
		</uni-popup>
		<scroll-view scroll-y class="page-wrap-bd">
			<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="getList" :down="downOption"
				:up="upOption">
				<view v-if="listData.length > 0" class="list">
					<view @click="toDetail(item)" v-for="(item, i) of listData" :key="i" class="list-item">
						<view class="pic">
							<cimage :src="item.thumb" mode="scaleToFill" />

							<view v-if="i + 1 <= 3" class="tag">
								<cimage src="/static/icon/hot_tag.png" mode="scaleToFill" />
							</view>
						</view>

						<!-- 商品信息 -->
						<view class="item-info">
							<view class="title hang2">
								{{ item.title }}
							</view>

							<view class="price-num">
								<view class="price">
									¥
									<text>{{ item.price }}</text>
								</view>

								<view class="num">{{ item.sales }}人开启</view>
							</view>

							<!-- 奖品列表 -->
							<gbro-marquee broadcastType="mould" direction="left" :viewHeight="76"
								:imgdata="item.awardList" :broadcastStyle="{ speed: 40 }" style="width: 100%">
								<block v-for="c in 2" :key="c">
									<!--在小程序里遇到一个坑不能使用两个slot 所有统一复制一份做衔接 -->
									<view v-for="(a, b) in item.awardList.slice(0, 15)" :key="b" class="pic">
										<cimage :src="a" />
									</view>
								</block>
							</gbro-marquee>
						</view>
					</view>
				</view>
			</mescroll-body>
		</scroll-view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				// 下拉刷新的配置(可选, 绝大部分情况无需配置)
				downOption: {
					auto: false
				},
				// 上拉加载的配置(可选, 绝大部分情况无需配置)
				upOption: {
					auto: true,
					page: {
						size: 20 // 每页数据的数量,默认10
					}
				},
				listData: [],
				logList: [],
				barrageTimer: null,
				barrageCur: 0,
				swiperList: '',
				userInfo: [],
				msgType: '',
				popContent: '',
				ggao: []
				// ggao:[
				// 	{''}
				// ],
			}
		},

		onShareAppMessage() {
			return {
				title: `开盲盒 赢好礼!`,
				path: `/pages/box/box`
			}
		},
		onLoad(options) {
			this.chouhegonggao()
			this.$store.dispatch('getAppConfig').then((res) => {
				console.log(res);
				this.popContent = res.data.pop_con
			})
			if (options.scene) {
				let invite_code = decodeURIComponent(options.scene)
				let index = invite_code.indexOf('=') + 1
				if (index > 0) {
					invite_code = invite_code.slice(index, invite_code.length)
					uni.setStorageSync('invite_code', invite_code);
				} else {
					uni.setStorageSync('invite_code', invite_code);
				}
			}
			if(options.hasOwnProperty('invite_code')&&options.invite_code){
					uni.setStorageSync('invite_code', options.invite_code);
			}
			/* 获取轮播图 */
			this.$common.getBanner(3).then(res => {
				this.swiperList = res
			})

		},

		onReady() {
			this.getLog()
		},

		onUnload() {
			clearTimeout(this.barrageTimer)
			this.barrageTimer = null
		},
		computed: {
			...mapGetters(['sysConfig'])
		},
		methods: {
			dialogClose() {
				console.log('点击关闭')
			},
			/*
			打开手机号弹窗
			*/
			dialogToggle(type) {
				this.msgType = type
				console.log(type);
				this.$refs.alertDialog.open()
			},
			dialogConfirm() {
				this.$common.to({
					url: '/package/mine/account-safe',
				})
			},
			/**
			 * @description: 中奖记录
			 * @return {*}
			 */
			getLog() {
				this.req({
					url: '/v1/box/log',
					data: {},
					Loading: true,
					success: res => {
						if (res.code == 200) {
							this.logList = res.data

							this.runBarrage()
						}
					}
				})
			},


			/**
			 * @description: 获取商品列表数据
			 * @param {*}
			 * @return {*}
			 */
			getList({
				num,
				size
			}) {
				this.req({
					url: '/v1/box/list',
					data: {
						page: num,
						per_page: size
					},
					Loading: true,
					success: res => {
						if (res.code == 200) {
							if (num == 1) {
								this.listData = []
							}

							this.listData = [...this.listData, ...res.data.data]
							this.mescroll.endBySize(res.data.data.length, res.data.total)
						}
					}
				})
			},

			/**
			 * @description: 前往盒子详情
			 * @param {*} item
			 * @param {*} i
			 * @return {*}
			 */
			toDetail(item) {
				this.$common.to({
					url: '/package/box/box-detail',
					query: {
						id: item.id
					}
				})
			},

			/**
			 * @description: 抽盒公告
			 * @return {*}
			 */
			chouhegonggao() {
				this.req({
					url: '/v1/box/chouhegonggao',
					data: {},
					Loading: true,
					success: res => {
						if (res.code == 200) {
							this.ggao.push(res.data[0].val);
							// this.logList = res.data

							// this.runBarrage()
						}
					}
				})
			},
			/**
			 * @description: 发送弹幕
			 * @param {*}
			 * @return {*}
			 */
			runBarrage() {
				console.log(111111);
				this.barrageTimer = setInterval(() => {
					if (this.logList.length > 0) {
						this.$refs.detailBarrage.add({
							head_pic: this.logList[this.barrageCur].avatar,
							title: this.logList[this.barrageCur].title,
							name: this.logList[this.barrageCur].nickName,
							times: this.logList[this.barrageCur].times,
							markTitle: this.logList[this.barrageCur].mark_title,
							prize: this.logList[this.barrageCur].thumb
						})
						this.barrageCur += 1
						if (this.barrageCur == this.logList.length) {
							this.barrageCur = 0
						}
					}
				}, 3000)
			}
		}
	}
</script>

<style lang="scss">
	.page-wrap {
		// padding-top: 460rpx;
		min-height: 100vh;
		// background: #fff;
		background-size: 100% auto;
		width: 750rpx;
		overflow-x: hidden;

		&-hd {
			width: 750rpx;
			height: 460rpx;
			position: relative;
			left: 0;
			top: 0;
			z-index: 5;
			// background: #000;

			.banner {
				width: 100%;
				height: 400rpx;

				.swiper-pic {
					width: 100%;
					height: 100%;
				}
			}

			.radius-hd {
				width: 100%;
				padding-top: 20rpx;

				&-content {
					height: 42rpx;
					border-radius: 30rpx 30rpx 0 0;
					background: #fff;
				}
			}

			.barrage-wrap {
				width: 100%;
				height: 200rpx;
				position: absolute;
				bottom: 50rpx;
				left: 0;
				box-sizing: border-box;
				padding: 0 70rpx;
			}

			.log-item {
				display: inline-flex;
				height: 46rpx;
				align-items: center;
				padding: 0 14rpx;
				box-sizing: border-box;
				// width: 360rpx;
				margin-bottom: 14rpx;

				.avatar {
					width: 35rpx;
					height: 35rpx;
					border-radius: 50%;
					overflow: hidden;
				}

				.nick-name {
					width: 70rpx;
					font-size: 20rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
					margin-left: 10rpx;
				}

				.prize {
					margin-left: 10rpx;
					font-size: 20rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;

					text {
						margin-left: 10rpx;
						color: #666ef2;
					}
				}

				.pic {
					margin-left: 30rpx;
					width: 35rpx;
					height: 35rpx;
				}
			}

			.bag-btn {
				word-wrap: break-word;
				word-break: break-all;
				width: 45rpx;
				height: 145rpx;
				background: rgba(255, 255, 255, 0.9);
				border-radius: 0rpx 10rpx 10rpx 0rpx;
				display: flex;
				flex-flow: column nowrap;
				justify-content: center;
				align-items: center;
				text-align: center;
				position: absolute;
				z-index: 1;
				left: 0;
				bottom: 170rpx;

				.icon {
					width: 40rpx;
					height: 40rpx;
				}

				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
			}

			.rule-btn {
				word-wrap: break-word;
				word-break: break-all;
				width: 45rpx;
				height: 169rpx;
				background: rgba(255, 255, 255, 0.9);
				border-radius: 10rpx 0rpx 0rpx 10rpx;
				position: absolute;
				z-index: 1;
				right: 0rpx;
				top: 140rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				box-sizing: border-box;
				padding: 0 10rpx;
				line-height: 32rpx;

				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
			}
		}

		&-bd {
			// margin-top: -2rpx;
			// padding: 0 14rpx;
			height: calc(100vh - 460rpx);
			width: 720rpx;
			background: #f9f9f9;
			border-radius: 20rpx;
			overflow: hidden;
			margin: 40rpx auto;

			.list {
				padding: 20rpx 10rpx 40rpx;
				box-sizing: border-box;

				&-item {
					padding: 16rpx 0;
					display: flex;

					.pic {
						width: 260rpx;
						height: 260rpx;
						position: relative;
						border-radius: 10rpx;
						background: #fff;
						// overflow: hidden;

						image {
							border-radius: 10rpx;
							overflow: hidden;
						}

						.tag {
							width: 88rpx;
							height: 30rpx;
							position: absolute;
							z-index: 1;
							left: 0;
							top: 0;

							image {
								border-radius: 0;
							}
						}
					}

					.item-info {
						width: calc(100% - 260rpx);
						box-sizing: border-box;
						padding-left: 26rpx;
						display: flex;
						flex-flow: column nowrap;
						justify-content: space-around;

						.title {
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #666666;
						}

						.price-num {
							display: flex;
							justify-content: space-between;
							align-items: center;

							.price {
								font-size: 28rpx;
								font-family: Source Han Sans CN;
								font-weight: 800;
								color: #333333;
								font-weight: bold;

								text {
									font-size: 32rpx;
								}
							}

							.num {
								font-size: 24rpx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #999999;
							}
						}

						.pic {
							width: 76rpx;
							height: 76rpx;
							border-radius: 6rpx;
							margin: 0 5rpx;
						}
					}
				}

				// &-item + .list-item {
				//   border-top: 1px solid #eee;
				// }
			}
		}
	}

	.fhsm {
		position: relative;
		padding-left: 20rpx;
		top: 416rpx;
	}

	.fhsm-two {
		padding-left: 10px;
		position: relative;
		top: 420rpx;
	}
</style>